<template>
	<view class="page-vip">
		<view class="head_bg">
			<view class="null"></view>
			<view class="back flex">
				<image @click="goBack" class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back_w.png">
				</image>
				<text class="ft1 c-ff">会员权益</text>
			</view>
		</view>
		<view class="info_box">
			<view class="timeTips ft-22 c-ff text_center" v-if="tabIndex !== 1">到期时间：{{ tabIndex == 2
				? vipInfo.year_expire_time : vipInfo.forever_expire_time }}
			</view>
			<view class="info">
				<image class="back" src="https://cdn.oss.bon-top.cn/static_bc/images/vip_word.png" mode="aspectFill">
				</image>
				<view class="content flex" v-if="Object.keys(userInfo).length > 0">
					<view class="avtor flex-center">
						<image class="img" :src="userInfo.avatar" mode="aspectFill"></image>
					</view>
					<view class="ml-20 desc">
						<view class="post flex-start">
							<view class="ft1" style="margin-right: 4rpx;">{{ userInfo.nickname }}</view>
							<image v-if="userInfo.sex === '男'" class="image wh-28"
								src="https://cdn.oss.bon-top.cn/static_bc/images/boy.png"></image>
							<image v-else-if="userInfo.sex === '女'" class="image wh-28"
								src="https://cdn.oss.bon-top.cn/static_bc/images/girl.png"></image>
						</view>
						<view class="level mt-10">{{ userInfo.level_info.name }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="main pd-30">
			<view class="list flex-bwt">
				<view class="item flex-c-center" style="justify-content: flex-start;"
					:class="{ active: tabIndex === item.id }" v-for="(item, index) in tabList" :key="index"
					@click="selectTab(item)">
					<view class="recom flex-center" v-if="index == 1">推荐</view>
					<view class="flex" style="align-items: flex-end;">
						<view class="ft-28 c-33 fw-800">{{ item.txt1 }}</view>
						<view class="ft-22 c-33 fw-800 ml-10">{{ item.txt2 }}</view>
					</view>
					<view class="flex mt-12">
						<image class="wh-28" src="https://cdn.oss.bon-top.cn/static_bc/images/vip_icon1.png"
							style="margin-right: 2rpx;" v-if="index == 0"></image>
						<image class="wh-28" src="https://cdn.oss.bon-top.cn/static_bc/images/vip_icon2.png"
							style="margin-right: 2rpx;" v-else></image>
						<view class="txt">{{ item.txt3 }}</view>
					</view>
					<view class="flex mt-20">
						<view class="ft-28 c-33 fw-800">￥</view>
						<view class="price ft-num fw-900">{{ item.price }}</view>
					</view>
					<view class="integral flex-center mt-10" v-if="item.integral > 0">
						或{{ item.integral }}积分
					</view>
					<view class="check flex" v-if="tabIndex == item.id">
						<image class="wh-36" src="https://cdn.oss.bon-top.cn/static_bc/images/vip_icon3.png"
							mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="flex-bwt mt-30">
				<view class="flex-bwt deal-item pd-20">
					<view class="ft">VIP服务协议</view>
					<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
				<view class="flex-bwt deal-item pd-20">
					<view class="ft">客户服务协议</view>
					<image class="wh-24" src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png"></image>
				</view>
			</view>
			<view class="vip-content pd-20 mt-30">
				<view class="en ft-eng fw-900">Membership Benefits</view>
				<view class="title ft-32 fw-800">#会员权益#</view>
				<template v-if="tabIndex == 1">
					<view class="flex c-item">
						<image class="wh-68 mr-10" style="flex-shrink: 0;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/vip_icon4.png"></image>
						<view>
							<view class="ft fw-800">普通用户</view>
							<view class="ft-22 c-99">内容未定</view>
						</view>
					</view>
					<view class="flex c-item mt-20">
						<image class="wh-68 mr-10" style="flex-shrink: 0;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/vip_icon4.png"></image>
						<view>
							<view class="ft fw-800">其它</view>
							<view class="ft-22 c-99">正常功能</view>
						</view>
					</view>
				</template>
				<template v-if="tabIndex == 3">
					<view class="flex c-item">
						<image class="wh-68 mr-10" style="flex-shrink: 0;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/vip_icon4.png"></image>
						<view>
							<view class="ft fw-800">永久会员</view>
							<view class="ft-22 c-99">内容未定</view>
						</view>
					</view>
					<view class="flex c-item mt-20">
						<image class="wh-68 mr-10" style="flex-shrink: 0;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/vip_icon4.png"></image>
						<view>
							<view class="ft fw-800">VIP号身份标志</view>
							<view class="ft-22 c-99">专属会员标识，彰显身份</view>
						</view>
					</view>
				</template>
				<template v-if="tabIndex == 2">
					<view class="flex c-item">
						<image class="wh-68 mr-10" style="flex-shrink: 0;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/vip_icon4.png"></image>
						<view>
							<view class="ft fw-800">尊享会员</view>
							<view class="ft-22 c-99">内容未定</view>
						</view>
					</view>
					<view class="flex c-item mt-20">
						<image class="wh-68 mr-10" style="flex-shrink: 0;"
							src="https://cdn.oss.bon-top.cn/static_bc/images/vip_icon4.png"></image>
						<view>
							<view class="ft fw-800">VIP号身份标志</view>
							<view class="ft-22 c-99">专属会员标识，彰显身份</view>
						</view>
					</view>
				</template>
			</view>
		</view>

		<view style="height: 208rpx;"></view>
		<view class="bottomBtn flex-c-center" v-if="vipInfo.is_can_vip == 1">
			<template v-if="tabIndex === 1">
				<view class="tips ft-22 c-99 mt-10">注册即为普通用户</view>
				<view class="btn flex-center">
					<view class="f-28 c-ff">已是普通用户无需开通</view>
				</view>
			</template>
			<template v-else-if="tabIndex === 3">
				<view class="tips ft-22 c-99 mt-10">选择开通当前账户 <text class="ft-22 c-33 fw-800">“{{ userInfo.nickname
				}}”</text> 为尊享永久会员</view>
				<view class="btn flex-center" @click="openVip">
					<view class="ft-28 c-ff fw-800">￥</view>
					<view class="ft-40 c-ff ft-num fw-900">{{ tabList[tabIndex - 2]?.price }}</view>
					<view class="txt ml-10">开通尊享永久会员</view>
				</view>
			</template>
			<template v-else-if="tabIndex === 2">
				<view class="tips ft-22 c-99 mt-10">选择开通当前账户 <text class="ft-22 c-33 fw-800">“{{ userInfo.nickname
				}}”</text> 为12个月尊享年会员</view>
				<view class="btn flex-center" @click="openVip">
					<view class="ft-28 c-ff fw-800">￥</view>
					<view class="ft-40 c-ff ft-num fw-900">{{ tabList[tabIndex]?.price }}</view>
					<view class="txt ml-10">开通尊享年会员</view>
				</view>
			</template>
		</view>
		<view class="bottomBtn flex-c-center" v-if="vipInfo.is_can_vip == 0">
			<view class="btn flex-center">
				<view class="f-28 c-ff">永久尊享会员，无需再续</view>
			</view>
		</view>
	</view>
	<view class="mask" v-if="showO"></view>
	<view class="offers" v-if="showO">
		<image class="popup-close wh-36" @click="closeO"
			src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png">
		</image>
		<view class="ft-32 ft1">会员购买</view>
		<!-- wh-32 -->
		<scroll-view scroll-y="true" class="scroll-Y">
			<view class="flex" style="align-items: flex-start;">
				<view class="cover">
					<image class="wh-100 bd-r20" :src="selectItem.bg" mode="aspectFill"></image>
				</view>
				<view class="r">
					<view class="ft-28 c-33 fw-800" style="margin-top: 14rpx;">白菜尊享会员</view>
					<view class="ft-24 c-99 mt-10">{{ tabIndex == 3 ? '永久会员' : '1年会员' }}</view>
				</view>
			</view>
			<view class="price-box pd-20 mt-20">
				<view class="flex-bwt">
					<view class="ft-24 c-99">商品价格</view>
					<view class="ft fw-800">￥{{ priceInfo.total_old_price_exchange_show }}</view>
				</view>
				<view class="flex-bwt mt-20" @click="showQuan = true">
					<view class="ft-24 c-99">优惠减</view>
					<view class="flex">
						<view class="txt">-￥{{ priceInfo.total_coupon_price_exchange_show }}</view>
						<image class="icon ml-10" mode="widthFix"
							src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
					</view>
				</view>
				<view class="flex-bwt mt-20" @click="goDeduction" v-if="priceInfo.is_can_use_integral == 1">
					<view class="ft-24 c-99">积分减</view>
					<view class="flex" v-if="integral > 0">
						<view class="txt">-￥{{ priceInfo.integral_reduce_price_exchange_show }}</view>
						<image class="icon ml-10" mode="widthFix"
							src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
					</view>
					<view class="flex" v-else>
						<view class="you">{{ priceInfo.can_use_integral }}积分可用</view>
						<image class="icon ml-10" mode="widthFix"
							src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"></image>
					</view>
				</view>
				<view class="flex-bwt mt-20">
					<view class="ft-24 c-99">合计实付</view>
					<view class="ft fw-800">￥{{ priceInfo.pay_price_show }}</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottomBtn flex-center">
			<view class="flex-bwt" style="width: 690rpx;">
				<view>
					<text class="ft ft-22 c-red ">￥</text>
					<text class="ft-num  c-red ">{{ priceInfo.pay_price_show }}</text>
					<text class="ft ft-22 c-red">元</text>
				</view>
				<view class="btn flex-center ft c-dbf" @click="subOrder">去支付</view>
			</view>
		</view>
	</view>
	<up-popup :show="showQuan" mode="bottom" round="14" @open="openQ">
		<view class="offers quan">
			<image class="popup-close wh-36" @click="closeQ"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
			<view class="ft1">优惠券</view>
			<view class="ft c-red mt-12">当前订单的优惠券</view>
			<view class="hengxian mt-20"></view>
			<view class="mt-20 ft fw-800">{{ "可领取优惠券" }}</view>
			<view class="list" v-if="priceInfo.coupon_list && priceInfo.coupon_list.length > 0">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="quanItem flex mt-12" v-for="(item, index) in priceInfo.coupon_list" :key="item.id"
						@click="checkCoupon(item, index)">
						<view class="arrow">
							<view class="tip ft ft-20 flex-center c-ff">{{ item.preferential_name }}</view>
							<view class="mt-20 flex-center">
								<view>
									<view class="ft-num ft-32">{{ item.currency_symbol }}{{ item.reduce }}</view>
									<view class="ft text_center">{{ item.type_name }}</view>
								</view>
							</view>
						</view>
						<view class="right flex-bwt pd-20">
							<view class="ml-20 mt-10">
								<view class="ft fw-800" v-if="item.is_stackable === 1">部分商品可用（可叠加）</view>
								<view class="ft fw-800" v-else>部分商品可用（不可叠加）</view>
								<view class="ft c-99 mt-10">{{ item.start_time }}~{{ item.end_time }}</view>
							</view>
							<image class="mr-10" style="width: 30rpx;height: 30rpx;"
								src="https://cdn.oss.bon-top.cn/static_bc/images/check.png" v-if="item.is_check == 1">
							</image>
							<image class="mr-10" style="width: 30rpx;height: 30rpx;"
								src="https://cdn.oss.bon-top.cn/static_bc/images/un_check.png"
								v-if="item.is_check == 0">
							</image>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="bottomBtn flex-center">
				<view class="btn flex-center ft c-dbf" @click="sureCoupon">确定</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup lang="js">
import {
	onLoad
} from '@dcloudio/uni-app'
import {
	reactive,
	ref
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";

const tabIndex = ref(2)
const tabList = ref([{
	id: 1,
	txt1: '普通 | ',
	txt2: '注册用户',
	txt3: '普通会员',
	price: 0,
	integral: 0,
	bg: ''
},
{
	id: 3,
	txt1: '限时 | ',
	txt2: '永久会员',
	txt3: '尊享永久会员',
	price: 0,
	integral: 0,
	bg: 'https://cdn.oss.bon-top.cn/static_bc/images/vip_forever_cover.png'
},
{
	id: 2,
	txt1: '12',
	txt2: '个月',
	txt3: '尊享会员',
	price: 0,
	integral: 0,
	bg: 'https://cdn.oss.bon-top.cn/static_bc/images/vip_year_cover.png'
},
])
const selectTab = (item) => {
	tabIndex.value = item.id

}

const userInfo = ref({})
const vipInfo = ref({})
const priceInfo = ref({})
let defaults = reactive(['uEyoOBtC04GyAJreDcHNOWxXUqLnVhCi0iiy8JZFtkY', 'nJfc7Omo7j13JVoSFeYRWNkRUpD1avigbHrUZh02ukc',])//会员等级变更通知/会员即将到期通知

const isSettings = ref(false)


onLoad(() => {
	utils
		.request(
			api.myCenter, {},
			"get"
		)
		.then((res) => {
			userInfo.value = res.data.info.u_info
			tabIndex.value = userInfo.value?.level_info?.id != 1 ? userInfo.value?.level_info?.id : tabIndex.value
		});
	utils
		.request(
			api.vipOpen, {},
			"get"
		)
		.then((res) => {
			vipInfo.value = res.data
			console.log('vi', vipInfo.value)
			tabList.value[1].price = res.data.vip_forever_price
			tabList.value[1].integral = res.data.vip_forever_integral
			tabList.value[2].price = res.data.vip_year_price
			tabList.value[2].integral = res.data.vip_year_integral
		});
	wx.getSetting({
		withSubscriptions: true,

		success(res) {
			if (res.subscriptionsSetting.itemSettings) {
				isSettings.value = defaults.some(f => res.subscriptionsSetting.itemSettings[f])
				// if (res.subscriptionsSetting.itemSettings['Urp9k7LRaQPJzoZIqQuaZJhmn2docH7YLzaPpAaKm9k']) isSettings.value = true
			}
		}
	})
})

const coupon_id = ref('')
const getSettlement = () => {
	utils
		.request(
			api.vipSettlement, {
			type: tabIndex.value == 3 ? 'forever' : 'year',
			coupon_id: coupon_id.value,
			integral: integral.value
		},
			"post"
		)
		.then((res) => {
			priceInfo.value = res.data
		});
}
const selectItem = ref({})
const openVip = () => {
	getSettlement()
	showO.value = true
	selectItem.value = tabList.value.find(f => f.id == tabIndex.value)
}

const showO = ref(false)
const closeO = () => {
	showO.value = false
}

const showQuan = ref(false)
const closeQ = () => {
	showQuan.value = false
}
const openQ = () => {
	showQuan.value = true;
}

const check_coupon_id = ref('')
const checkCoupon = (item, index) => {
	console.log('item', item)
	if (item.is_check == 1) {
		check_coupon_id.value = -1
		priceInfo.value.coupon_list[index].is_check = 0
	} else {
		check_coupon_id.value = item.id
		priceInfo.value.coupon_list[index].is_check = 1
		priceInfo.value.coupon_list.value.forEach((v, k) => {
			if (v.id != item.id) {
				priceInfo.value.coupon_list[k].is_check = 0
			}
		})
	}
}
const sureCoupon = () => {
	coupon_id.value = check_coupon_id.value
	getSettlement()
	closeQ()
}

const integral = ref(0)
const goDeduction = () => {
	uni.navigateTo({
		url: "/subpackage/joinGroup/deduction",
		events: {
			// 监听子页面事件
			fromDetail: (data) => {
				integral.value = data.integral
				getSettlement()
			}
		},
		success: (res) => {
			// 向子页面传递数据
			res.eventChannel.emit('toDetail', { integral: priceInfo.value.can_use_integral, can_use_integral_show: priceInfo.value.can_use_integral_show, integral_exchange_rule: vipInfo.value.integral_exchange_rule });
		}
	});
}

const subOrder = () => {
	// 订阅消息
	if (!isSettings.value) {
		wx.requestSubscribeMessage({
			tmplIds: defaults,
			success(res) {
				utils.subscribeMessage(res)
			},
			complete(res) {
				submit()
			}
		})
	} else {
		submit()

	}


}
const submit = () => {
	let find = tabList.value.find(f => f.id == tabIndex.value)
	const formData = {
		type: tabIndex.value == 3 ? 'forever' : 'year',
		coupon_id: coupon_id.value,
		integral: integral.value,
		bg: find.bg,
		is_sub: 1
	}
	utils
		.request(
			api.vipSettlement, formData,
			"post"
		)
		.then((res) => {
			showO.value = false;
			if (res.data.is_pay == 1) {
				//跳转到已支付页面
				uni.redirectTo({
					url: `/subpackage/joinGroup/waitPay?id=${res.data.order_id}`,
				});
			} else {
				//跳转到支付页面
				uni.redirectTo({
					url: `/subpackage/joinGroup/cashRegister?order_id=${res.data.order_id}`,
				});
			}
		});
}
// 返回键
const goBack = () => {
	uni.navigateBack(-1)
}
</script>

<style lang="scss" scoped>
.page-vip {
	position: relative;

	.info_box {
		position: absolute;
		top: 236rpx;
		left: 30rpx;

		.timeTips {
			width: 282rpx;
			height: 44rpx;
			line-height: 44rpx;
			background: linear-gradient(180deg, #5A54FF 0%, #2B24DB 100%);
			border-radius: 10rpx 20rpx 10rpx 20rpx;
			position: absolute;
			left: 20rpx;
			top: -34rpx;
			z-index: 2;
		}
	}

	.info {
		position: relative;

		width: 690rpx;
		height: 130rpx;
		background: linear-gradient(180deg, #DBF046 0%, #BFFFBB 100%);
		border-radius: 20rpx;

		.back {
			position: absolute;
			top: 0;
			left: 0;
			width: 690rpx;
			height: 130rpx;
		}

		.content {
			width: 690rpx;
			height: 130rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			.avtor {
				width: 84rpx;
				height: 84rpx;
				background: #ffffff;
				border-radius: 50%;

				.img {
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
				}
			}

			.desc {
				position: relative;

				.level {
					background: #333333;
					border-radius: 8rpx;
					padding: 4rpx 10rpx;
					box-sizing: border-box;
					font-weight: bold;
					font-size: 20rpx;
					color: #FFFFFF;
					width: fit-content;
				}
			}
		}
	}

	.main {
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		position: absolute;
		width: 100%;
		top: 396rpx;
		display: flex;
		flex-direction: column;

		.list {
			padding-top: 24rpx;

			.item {
				width: 216rpx;
				height: 258rpx;
				background: #FBFFDF;
				border-radius: 20rpx;
				border: 2rpx solid #DBF046;
				padding-top: 20rpx;
				position: relative;

				.recom {
					width: 84rpx;
					height: 44rpx;
					background: linear-gradient(180deg, #5A54FF 0%, #2B24DB 100%);
					border-radius: 10rpx 20rpx 10rpx 20rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					position: absolute;
					left: 20rpx;
					top: -22rpx;
				}

				.txt {
					font-size: 22rpx;
					color: #666666;
				}

				.price {
					font-size: 68rpx;
					color: #333333;
				}

				.integral {
					width: 100%;
					height: 48rpx;
					background: linear-gradient(93deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 51%, rgba(255, 255, 255, 0) 100%);
					border-radius: 18rpx;
					font-size: 20rpx;
					color: #333333;
				}

				.check {
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}

			.item.active {
				background: linear-gradient(180deg, #DBF046 0%, #BFFFBB 100%);
				border: 2rpx solid #333333;

				.txt {
					color: #333333;
				}
			}
		}

		.deal-item {
			width: 334rpx;
			background: #F8F8F8;
			border-radius: 20rpx;
		}

		.vip-content {
			width: 690rpx;
			background: linear-gradient(180deg, #FBFFDF 0%, #FFFFFF 100%);
			border-radius: 40rpx;
			position: relative;

			.title {
				color: #333333;
				position: absolute;
				z-index: 2;
				top: 20rpx;
				z-index: 1;
				height: 44rpx;
				// background-color: #2B24DB;
				line-height: 44rpx;

			}

			.en {
				color: #DBF046;
				height: 44rpx;
				font-size: 44rpx;
				position: relative;
				margin-top: 14rpx;
				z-index: 1;
				// background-color: #5A54FF;
				line-height: 44rpx;
			}

			.c-item {
				margin-top: 6rpx;
				width: 650rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				border: 2rpx solid #F1F1F1;
				padding: 20rpx;
				box-sizing: border-box;
			}

			.c-item.mt-20 {
				margin-top: 20rpx;
			}
		}
	}
}

.head_bg {
	width: 750rpx;
	height: 436rpx;
	background: linear-gradient(180deg, #333333 0%, #6E7823 100%);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	background-image: url("https://cdn.oss.bon-top.cn/static_bc/images/vip_bg.png");
	background-size: 100% 100%;

	.null {
		width: 100%;
		height: 88rpx;
	}

	.back {
		height: 88rpx;
		width: 100%;

		.icon {
			width: 28rpx;
			height: 48rpx;
			margin-left: 30rpx;
			margin-right: 258rpx;
		}
	}
}

.bottomBtn {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.tips {
		width: 690rpx;
		text-align: center;
		word-break: break-all;
	}

	.btn {
		width: 690rpx;
		height: 78rpx;
		background: #333333;
		border-radius: 20rpx;
		margin-top: 10rpx;

		.txt {
			font-size: 28rpx;
			color: #DBF046;
		}
	}
}

.mask {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 998;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
}

.offers {
	position: fixed;
	bottom: 0;
	left: 0;
	box-shadow: 0rpx 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	z-index: 999;
	width: 100vw;
	height: 70vh;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	//border: 2rpx solid red;
	// position: relative;
	padding: 40rpx;
	padding-bottom: calc(118rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;

	.popup-close {
		position: absolute;
		top: 44rpx;
		right: 44rpx;
	}

	.scroll-Y {
		height: calc(100% - 104rpx + env(safe-area-inset-bottom));
		padding-top: 20rpx;
	}

	.cover {
		width: 122rpx;
		height: 146rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.price-box {
		background: linear-gradient(180deg, rgba(241, 241, 241, 0) 0%, #F1F1F1 100%);
		border-radius: 20rpx;

		.txt {
			font-weight: 800;
			font-size: 24rpx;
			color: #FF0000;
		}

		.icon {
			width: 20rpx;
			height: 34rpx;
			margin-left: 10rpx;
		}

		.you {
			padding: 8rpx 20rpx;
			box-sizing: border-box;
			background: #fff3ec;
			border-radius: 34rpx;
			font-size: 24rpx;
			color: #FF0000;
		}
	}

	.bottomBtn {
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
		background: #F8F8F8;
		width: 100%;
		padding-top: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

		.btn {
			width: 192rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx;
		}
	}
}

.offers.quan {
	position: relative;

	.hengxian {
		width: 670rpx;
		height: 0rpx;
		border-bottom: 2rpx solid #f1f1f1;
	}

	.list {
		height: calc(70vh - 228rpx + env(safe-area-inset-bottom));

		.scroll-Y {
			// height: 670rpx;
			height: 100%;

			.quanItem {
				.arrow {
					width: 182rpx;
					height: 144rpx;
					background: linear-gradient(90deg, #dbf046 0%, #ffee7e 100%);
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					.tip {
						padding: 4rpx;
						width: fit-content;
						background: #333333;
						border-radius: 20rpx 8rpx 8rpx 8rpx;
					}
				}

				.right {
					width: 488rpx;
					height: 144rpx;
					background: #ffffff;
					border-radius: 20rpx 20rpx 20rpx 20rpx;

					.btn {
						width: 88rpx;
						height: 54rpx;
						background: #dbf046;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}

					.btnA {
						width: 112rpx;
						height: 54rpx;
						background: #333333;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}
				}
			}
		}
	}

	.bottomBtn {
		.btn {
			width: 690rpx;
		}
	}
}
</style>